
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>


<template>
  <div class="h100 p20">
    <div class="center">
      <br>
      <br>
      <br>
      <h3 class="f20">{{show.title}}</h3>
      <br>
      <br>
      <p>请输入支付密码，以验证身份</p>
      <br>
      <br>
      <br>
    </div>
    <!-- 密码输入框 -->
    <van-password-input
      :value="form.value"
      info="密码为 6 位数字"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
    />
    <!-- 数字键盘 -->
    <van-number-keyboard
      :show="showKeyboard"
      @input="onInput"
      @delete="onDelete"
      @blur="showKeyboard = false"
    />
  </div>
</template>

<script>
import { getPassword } from "@/http/api";
export default {
  data() {
    return {
      show: {
        title: "设置密码"
      },
      form: {
        value: ""
      },
      value: "",
      showKeyboard: true
    };
  },
  created() {
    this.getGetPassword()
  },
  methods: {
    getGetPassword() {
      getPassword().then(res => {
        console.log(res);
      });
    },
    onInput(key) {
      this.form.value = (this.form.value + key).slice(0, 6);
      if (this.form.value.length === 6) {
        this.setPasswordSub();
      }
    },
    onDelete() {
      this.form.value = this.form.value.slice(0, this.form.value.length - 1);
    },
    setPasswordSub() {
    }
  }
};
</script>

